window.addEventListener('load', function() {
    var arrorl = document.querySelector('.arror-l');
    var arrorr = document.querySelector('.arror-r');
    var focus = document.querySelector('.focus')
    focus.addEventListener('mouseenter', function() {
        arrorl.style.display = 'block';
        arrorr.style.display = 'block';
        clearInterval(timer);
        timer = null;
    })
    focus.addEventListener('mouseleave', function() {
            arrorl.style.display = 'none';
            arrorr.style.display = 'none';
            timer = setInterval(() => {
                // 播放功能类似右箭头功能
                arrorr.click();
            }, 3000);
        })
        //动态生成对应照片数量的小圆圈
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');
        //记录当前小圆圈的索引号  通过自定义来做
        li.setAttribute('index', i);
        ol.appendChild(li);
        // console.log('1---' + i);
        // console.log(ul.children.length);
        li.addEventListener('click', function() {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
                // console.log('2----' + i);
            }
            this.className = 'current';
            // alert('over');
            // 点击圆圈移动图片
            // animate(object,target,callback)
            var index = this.getAttribute('index');
            // 当我们点击了li也需要将li的索引号传递给num
            num = index;
            // 当我们点击了li也需要将li的索引号传递给circle
            circle = index;
            var focusWidth = focus.offsetWidth;
            animate1(ul, -index * focusWidth);
        })
    }
    // 把ol里面的第一个li设置为类名current
    ol.children[0].className = 'current';
    // 克隆第一张图片
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // 箭头点击事件
    var num = 0;
    // 控制圆圈的变化
    var circle = 0;
    //节流阀
    var flag = true;
    // 右侧箭头
    arrorr.addEventListener('click', function() {
            if (flag) {
                flag = false;
                //如果到最后一张，此时我们的ul要快速复原left=0
                if (num == ul.children.length - 1) {
                    ul.style.left = 0;
                    num = 0;
                }
                num++;
                var focusWidth = focus.offsetWidth;
                animate1(ul, -num * focusWidth, function() {
                    flag = true; //打开节流阀
                });
                circle++;
                // 如果circle==4 说明在最后一张图片
                if (circle == ol.children.length) {
                    circle = 0;
                }
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                    // console.log('2----' + i);
                }
                ol.children[circle].className = 'current'
            }
        })
        // 左测按钮
    arrorl.addEventListener('click', function() {
            if (flag) {
                flag = false;
                if (num == 0) {
                    num = ul.children.length - 1;
                    ul.style.left = -num * focusWidth + 'px';
                }
                num--;
                var focusWidth = focus.offsetWidth;
                animate1(ul, -num * focusWidth, function() {
                    flag = true;
                });
                circle--;
                // 如果circle<0,说明第一张图片，则小圆圈需要改成第四个小圆圈
                // if (circle < 0) {
                //     circle = ol.children.length - 1;
                // }
                // 用三元表达式
                circle = circle < 0 ? ol.children.length - 1 : circle;
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                    // console.log('2----' + i);
                }
                ol.children[circle].className = 'current'
            }
        })
        // 可封装函数
        // function circleChange() {
        //     for (var i = 0; i < ol.children.length; i++) {
        //         ol.children[i].className = '';
        //         // console.log('2----' + i);
        //     }
        //     ol.children[circle].className = 'current'
        // }

    // 自动播放功能
    var timer = setInterval(() => {
        // 播放功能类似右箭头功能
        arrorr.click();
    }, 3000);
    //节流阀 方式连续点击事件发生，通过回调函数来控制

})